<template>
  <div class="" :id="id">
    <basic-table
      :model-type="'engineer'"
      :table-title="tableTitle"
      :data-source="dataSource"
      :data-params="dataParams"
      :is-search="false"
      :multiple-table="false"
      :spanArr="spanArr"
      :spanFunc="spanFunc"
      class="mt-4"
      @nextEmit="nextEmit"
      @SelectAll="SelectAll"
    >
      <template v-slot:name="scope">
        <div v-if="scope.row.Id !== null">
          <router-link :to="{path: '/talentPerson/info?id=' + scope.row.Id}">
          <span style="color: #0087FE">{{ scope.row.PerName }}</span>
        </router-link>
        </div>
        <div v-else>
          <span>{{ scope.row.PerName }}</span>
        </div>
      </template>
      <template v-slot:PerCard="scope">
        <div 
        :key="`percard-${scope.row.index}-${refreshKey}`"
        :ref="`box-${scope.row.index}`">
        {{ scope.row.PerCard }} 
        <i class="el-icon-view" style="color: #0087FE; cursor: pointer;" @click="openpercard([scope.row])"></i></div>
      </template>
    </basic-table>
  </div>
</template>
<script>
import BasicTable from '@/components/BasicTable/index.vue'
import { getComProfePersons,GetIdCardInfo } from '@/api/company'
export default {
  name: 'Engineer',
  components: { BasicTable },
  props: {
    companyId: { type: String, default: '' },
    id:{ type: String, default: '' },
  },
  data() {
    return {
      spanArr:[{ spanColumnIndex:1, spanName: 'PerName'},{ spanColumnIndex:2, spanName: 'PerCard'}],
      dataSource: () => getComProfePersons,
      dataParams: {
        companyId: ''
      },
      tableTitle: [
        {
          label: '姓名',
          value: 'PerName',
          show: true,
          type: 'slot',
          slot: 'name',
          width: 100
        },
        {
          label: '身份证号',
          value: 'PerCard',
          show: true,
          type: 'slot',
          slot: 'PerCard',
          width: 150
        },
        {
          label: '证书编号',
          value: 'CerNumber',
          show: true,
          type: 'text'
        },
        {
          label: '职称类别',
          value: 'CerName',
          show: true,
          type: 'text'
        },
        {
          label: '专业',
          value: 'CerMajor',
          show: true,
          type: 'text'
        }
      ],
      refreshKey: 0, // 用于强制刷新
      selectData:[],
    }
  },
  watch: {
    // 监听选中数据变化，更新表头多选框状态 . 
    selectedRows: {
      handler(newVal) {
        this.isAllSelected = newVal.length === this.tableData.length;
      },
      immediate: true
    }
  },
  created() {
    this.dataParams.companyId = this.companyId
  },
  methods:{
    SelectAll(v){
      this.openpercard(v)
    },
    nextEmit(v){
       // 更新数据后，触发重新渲染 
    this.refreshKey++;
    },
    openpercard(v){
      this.selectData=v;
      var params = {}
      if(v.length === 1){
        params ={
        cerId: v[0].CerId,
        cerType: '2',
        comId:  this.companyId// 企业id
      }
      }if(v.length > 1){
       const cerId = v.map(item => item.CerId).join('#')
        params ={
        cerId: cerId,
        cerType: '2',
        comId:  this.companyId// 企业id
      }
      }
      // return
      GetIdCardInfo(params).then((res)=>{
        let data=res.data;
        // if(data.length === 1){
        //   this.$nextTick(function(){
        //   const refName = `box-${v[0].index}`; // 这个就是控制眼睛打开的插槽
        //   const element = this.$refs[refName];
        //   element.textContent = data[0].IdCard
        // })
        // }else{
          for (let index = 0; index < data.length; index++) {
          this.$nextTick(function(){
          let selectIndex=this.selectData.findIndex(p=>p.CerId==data[index].CerId);
          const refName = `box-${v[selectIndex].index}`; // 这个就是控制眼睛打开的插槽
          const element = this.$refs[refName];
          element.textContent = data[index].IdCard
        })
        }
      })
    },
    // 就是1如果相同就和，2如果相同1和2都合
    spanFunc(row, column, rowIndex, columnIndex,tableData){
      if(columnIndex==2){
        return this.rowSpan(row, column, rowIndex, columnIndex,tableData,2,'PerName');
      }
      if(columnIndex==1){
        return this.rowSpan(row, column, rowIndex, columnIndex,tableData,1,'PerName');
      }
    },
    rowSpan(row, column, rowIndex, columnIndex,tableData,spanColumnIndex,spanName){
      if (columnIndex === spanColumnIndex) { // 只对第一列（日期列）进行合并

        const date = tableData[rowIndex][spanName];
        let span = 1;
 
        // 如果是第一个数据，或者当前行的日期与前一行不同，则重新计算合并数
        if (
          rowIndex === 0 ||
          tableData[rowIndex - 1][spanName] !== date
        ) {
          for (let i = rowIndex + 1; i < tableData.length; i++) {
            if (tableData[i][spanName] === date) {
              span++;
            } else {
              break;
            }
          }
        } else {
          // 如果不是第一组相同数据的行，则隐藏该单元格
          span = 0;
        }
        // console.log('span',span,date);
        return [span, 1]; // 合并行，列不合并

      }
      
    },
  }
}
</script>
